<template>
    <!-- 右侧文档信息区域 -->
    <div class="doc-info">
        <div class="doc-contain">
            <div class="doc-head">
                <img src="@/assets/Picture/DocumentManagement/information.png" alt=" ">
                <div>文档信息</div>
            </div>
            <div class="doc-body">
                <div>项目 ID: {{ document.projectId }}</div>
                <div>项目名称: {{ projectInfo.name }}</div>
                <div>项目描述: {{ projectInfo.description }}</div>
                <div>文档 ID: {{ document.id }}</div>
                <div>文档名称: {{ document.name }}</div>
                <div>文档描述: {{ document.description }}</div>
                <div>作者：
                    <input type="text" placeholder="请输入作者名称" :value="authorName" @input="updateLocalAuthor"
                        @blur="updateAuthor" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref, onMounted, watch } from 'vue';
import { useEditorStore } from '@/store/editor';
import { useProjectStore } from '@/store/project';
import axios from '@/plugins/axios';
import { ElMessage } from 'element-plus';

// 使用编辑器状态管理
const editorStore = useEditorStore();
const projectStore = useProjectStore();

// 从store获取项目信息
const projectInfo = computed(() => projectStore.getProjectInfo);
console.log('项目信息:', projectInfo.value);
// 从store获取文档数据
const document = computed(() => editorStore.documentInfo || {});
console.log('文档数据:', document.value);

// 本地作者信息变量，保持与store同步
const localAuthor = ref('');
const isUpdating = ref(false);

// 计算属性：获取作者姓名，优先从store获取，没有则返回本地值
const authorName = computed(() => {
    // 从store获取作者信息
    if (document.value && document.value.author) {
        return document.value.author;
    }
    // 如果store中没有，则使用本地值
    return localAuthor.value;
});

// 监听文档变化，更新本地作者值
watch(() => document.value?.author, (newAuthor) => {
    if (newAuthor !== undefined) {
        localAuthor.value = newAuthor;
    } else if (document.value && document.value.id && !localAuthor.value) {
        // 如果文档已加载但没有作者信息，尝试使用本地值
        if (editorStore.documentInfo) {
            editorStore.documentInfo.author = localAuthor.value;
        }
    }
}, { immediate: true });

// 监听本地作者值与文档作者值的同步
watch(authorName, (newAuthorName) => {
    // 如果本地作者值与当前显示的作者名不同，则同步
    if (localAuthor.value !== newAuthorName) {
        localAuthor.value = newAuthorName;
    }
});

// 在组件挂载时初始化
onMounted(() => {
    if (document.value && document.value.author) {
        localAuthor.value = document.value.author;
    }
});

// 当输入框内容变化时更新本地作者值
const updateLocalAuthor = (event) => {
    const newValue = event.target.value;
    localAuthor.value = newValue;

    // 同步到store，实现即时更新
    if (editorStore.documentInfo) {
        editorStore.documentInfo.author = newValue;
    }
};

// 当输入框失去焦点时更新到后端
const updateAuthor = async () => {
    if (!document.value || !document.value.id) {
        ElMessage.error('无法更新作者信息: 文档ID不存在');
        return;
    }

    // 防止重复提交
    if (isUpdating.value) return;
    isUpdating.value = true;

    console.log('作者信息:', localAuthor.value);

    try {
        const response = await axios.post('/update_document_author', {
            documentId: document.value.id,
            author: localAuthor.value.trim()
        });

        if (response.data.success) {
            // 确保store中的值已更新
            if (editorStore.documentInfo) {
                editorStore.documentInfo.author = localAuthor.value.trim();
            }
            ElMessage.success(response.data.message);
        } else {
            ElMessage.error(response.data.message);
        }
    } catch (error) {
        console.error('更新作者信息失败:', error);
        ElMessage.error('更新作者信息请求失败，请检查网络连接');
    } finally {
        isUpdating.value = false;
    }
};
</script>

<style scoped>
/*文档信息样式*/
.doc-contain {
    width: 300px;
    height: 580px;
    border: #ccc;
    border-radius: 10px;
    padding: 10px 10px 40px;
    background-color: #ffffff;
    overflow-y: hidden;
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.doc-head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.doc-head img {
    margin-right: 5px;
}

.doc-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    margin-top: 10px;
}

.doc-info {
    height: 640px;
    /* 设置合适的高度 */
    overflow-y: auto;
    /* 启用垂直滚动条 */
    padding: 10px;
    /* 可选：添加内边距 */
}

.doc-info ul {
    list-style-type: none;
    padding: 0;
}

.doc-info li {
    margin-bottom: 0.5rem;
}

.doc-head img {
    height: 20px;
    width: 20px;
    object-fit: contain;
}

.doc-body input {
    margin-top: 5px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 90%;
}

.doc-body input:focus {
    border-color: #4caf50;
    outline: none;
}

.doc-body div {
    margin-bottom: 10px;
    width: 100%;
}
</style>
